<style include="cr-hidden-style">
  :host {
    --border-bottom-height: 1px;
    --button-row-height: calc(2 * var(--padding-top-bottom) +
        var(--cr-button-height));
    --drawer-transition: 0.3s cubic-bezier(.25, .1, .25, 1);
    --padding-top-bottom: 10px;
  }

  /* This toggle needs special styling because it's on blue background. */
  @media (prefers-color-scheme: light) {
    :host(:not([enable-branding-update])) cr-toolbar cr-toggle {
      --cr-toggle-checked-bar-color: var(--google-grey-100);
      --cr-toggle-checked-button-color: white;
      --cr-toggle-checked-ripple-color: rgba(255, 255, 255, .2);
      --cr-toggle-unchecked-bar-color: var(--google-grey-600);
      --cr-toggle-unchecked-ripple-color: rgba(255, 255, 255, .15);
    }
  }

  cr-tooltip-icon {
    margin-inline-end: 20px;
  }

  #devDrawer[expanded] #buttonStrip {
    top: 0;
  }

  #devDrawer {
    background: #fff;
    border-bottom: 1px solid var(--google-grey-300);
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    transition: height var(--drawer-transition);
  }

  @media (prefers-color-scheme: dark) {
    #devDrawer {
      background: none;
      border-bottom-color: var(--cr-separator-color);
    }
  }

  #devDrawer[expanded] {
    height: calc(var(--button-row-height) + var(--border-bottom-height));
  }

  #buttonStrip {
    margin-inline-end: auto;
    margin-inline-start: 24px;
    padding: var(--padding-top-bottom) 0;
    position: absolute;
    top: calc(var(--button-row-height) * -1);
    transition: top var(--drawer-transition);
    /* Prevent selection of the blank space between buttons. */
    user-select: none;
    width: 100%;
  }

  #buttonStrip cr-button {
    margin-inline-end: 16px;
  }

  .more-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }

  .more-actions span {
    margin-inline-end: 16px;
  }

  :host([enable-branding-update]) cr-toolbar {
    --cr-toolbar-center-basis: 680px;
    --cr-toolbar-field-max-width: var(--cr-toolbar-center-basis);
    --cr-toolbar-field-width: 100%;
  }

  :host([enable-branding-update]) .more-actions {
    white-space: nowrap;
  }
</style>
<cr-toolbar page-name="$i18n{toolbarTitle}" search-prompt="$i18n{search}"
    clear-label="$i18n{clearSearch}" menu-label="$i18n{mainMenu}" show-menu
    autofocus narrow-threshold="1000">
  <div class="more-actions">
    <span id="devModeLabel">$i18n{toolbarDevMode}</span>
    <cr-tooltip-icon hidden="[[!shouldDisableDevMode_(
        devModeControlledByPolicy, isChildAccount)]]"
        tooltip-text="[[getTooltipText_(isChildAccount)]]"
        icon-class="[[getIcon_(isChildAccount)]]"
        icon-aria-label="[[getTooltipText_(isChildAccount)]]">
    </cr-tooltip-icon>
    <cr-toggle id="devMode" on-change="onDevModeToggleChange_"
        disabled="[[shouldDisableDevMode_(
            devModeControlledByPolicy, isChildAccount)]]"
        checked="[[inDevMode]]" aria-labelledby="devModeLabel">
    </cr-toggle>
  </div>
</cr-toolbar>
<template is="dom-if" if="[[showPackDialog_]]" restamp>
  <extensions-pack-dialog delegate="[[delegate]]"
      on-close="onPackDialogClose_">
  </extensions-pack-dialog>
</template>
<div id="devDrawer" expanded$="[[expanded_]]">
  <div id="buttonStrip">
    <cr-button hidden$="[[!canLoadUnpacked]]" id="loadUnpacked"
        on-click="onLoadUnpackedTap_">
      $i18n{toolbarLoadUnpacked}
    </cr-button>
    <cr-button id="packExtensions" on-click="onPackTap_">
      $i18n{toolbarPack}
    </cr-button>
    <cr-button id="updateNow" on-click="onUpdateNowTap_"
        title="$i18n{toolbarUpdateNowTooltip}">
      $i18n{toolbarUpdateNow}
    </cr-button>
<if expr="chromeos">
    <cr-button id="kioskExtensions" on-click="onKioskTap_"
        hidden$="[[!kioskEnabled]]">
      $i18n{manageKioskApp}
    </cr-button>
</if>
  </div>
</div>
